<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../css/common.css"/>
    <link rel="stylesheet" type="text/css" href="../css/base.css"/>
    <style>
    	body{
    		background: #fff;
    	}
    	.banding{
    		padding:10px;
    		position: relative;
    		overflow: hidden;
    	}
    	.form-wrap{
    		padding:0px 10px 0px 10px;
    		position: relative;
    		overflow: hidden;
    	}
    	.safe-explain{
    		margin: 1.2rem 0.5rem 0 0.5rem;
    		padding-bottom:30px;
    		position: relative;
    		overflow: hidden;
    	}.safe-img{
			margin-bottom:0.5rem;    	
    	}
    	.safe-img,.safe-explain-text{
    		text-align: center;
    	}
    	.form-wrap .form-group {
		    height: 1.8rem;
		    line-height: 1.8rem;
		    padding: 0 0.5rem;
		    
		    background: #fff;
		    position: relative;
		    display: -webkit-box;
		}
		.phone-number {
		    width:10rem;
		}
		.input {
		    -webkit-box-flex: 1;
		    border: none;
		    font-size: 0.6rem;
		    color: #444;
		    height: 1rem;
		    line-height: 1rem;
		    border-radius: 0;
		}
		.msg-validate {
		    text-align: left;
		    width: 5rem;
		    
		}
		.msg-btn{
		    position: absolute;
		    right: 0;
		    top: 0rem;
		    height: 1.8rem;
		    text-align: center;
		    font-size: 0.6rem;
		    line-height: 1.8rem;
		    background: #fff;
		    width: 5rem;
		}
		.pwd {
		    width: 10rem;
		}
		.confirm-btn {
    margin-top: 0.6rem;
    display: block;
    width: 100%;
    background: #FF0000;
    color: #fff;
    height: 1.8rem;
    line-height: 1.8rem;
    border-radius: 3px;
    border: none;
    font-size: 0.72rem;
    text-align: center;
}
    </style>
    <script>
    	(function () {
        function o() {
            document.documentElement.style.fontSize = (document.documentElement.clientWidth > 414 ? 414 : document.documentElement.clientWidth) / 12 + "px"
        }

        var e = null;
        window.addEventListener("resize", function () {
            clearTimeout(e), e = setTimeout(o, 300)
        }, !1), o()
    })(window);
    </script>
</head>
<body>
	<div id='banding'>
		<article>
			<div class="safe-explain border-bottom-img">
				<div class="safe-img">
					<img src="../image/safe.png" width="40px" height="40px"/>
				</div>
				<div class="safe-explain-text">
					<p>关联机器猫帐号可及时收到中奖通知</p>
					<p>还可以使用机器猫账号登录及领取活动红包</p>
				</div>
			</div>
		</article>
		<div  class="form-wrap">
			<div  class="form-group border-bottom-img">
				<input type="tel" class="input phone-number js-phone-number" id="phone" maxlength="11" placeholder="手机号">
				
			</div>
			
				<div id='code-wrap' style='display:none'  class="form-group border-bottom-img">
					<input type="text" class="js-msg-validate input msg-validate" id="code" maxlength="6" placeholder="请输入短信验证码">
					<div class="js-msg-btn msg-btn border-left-img" id="send"  onclick="getCode()">发送验证码</div>
				</div>
			<div id='pwd-wrap' style='display:none' class="form-group border-bottom-img">
				<input type="password" class="input js-pwd pwd" id='pwd' placeholder="密码" data-form-pw="1472017761154.585">
			</div>
		
			
			<div id='submit' style='display:none' onclick="submit()" class="js-regist-btn confirm-btn">关联</div>
			<div id='check' onclick="check()" class="js-regist-btn confirm-btn">下一步</div>
		</div>
	</div>
	
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript">
var authorize = null;
var uid = null;
var sel = false;
var sub = false;
var pwd = null;
var pin = null;
var mobile = null;
var send = null;
var times = 60; 
var timer = null;
	apiready = function(){
	
		send = $api.byId('send');

		 authorize = $api.getStorage("authorize");
		 //alert(JSON.stringify(authorize))
		 if(authorize==''||authorize==null){
		 	return false;
		 }
		//alert(JSON.stringify(authorize))
		var phone = $api.byId("phone");
		$api.addEvt(phone, 'focus', function(){
		$api.css($api.byId("submit"),"display:none");
		$api.css($api.byId("check"),"display:block");
		//alert("focus")
		$api.css($api.byId("pwd-wrap"),"display:none");
			$api.css($api.byId("code-wrap"),"display:none");
			$api.val($api.byId("code"),"");
	        $api.val($api.byId("pwd"),"");
		});
	
		
	};
	function binding_alert() {
  var dialogBox = api.require('dialogBox');
    dialogBox.alert({
        texts : {
           
            content : '是否使用第三方头像昵称等信息？',
            leftBtnTitle : '使用',
            rightBtnTitle : '取消'
        },
        styles : {
            bg : '#fff',
            corner : 6,
            w : 260,
            title : {
                marginT : 20,
                icon : 'widget://image/gou.png',
                iconSize : 32,
                titleSize : 18,
                titleColor : '#000'
            },
            content : {
                color : '#000',
                size : 16
            },
            left : {
                marginB : 15,
                marginL : 40,
                w : 40,
                h : 35,
                corner : 2,
                color : "#000",
                bg : '#fff',
                size : 16
            },
            right : {
                marginB : 15,
                marginL : 88,
                w : 40,
                h : 35,
                corner : 2,
                color : "#000",
                bg : '#fff',
                size : 16
            }
        },
        tapClose : true
    }, function(ret) {
        if (ret.eventType == 'left') {
        	sel = true;
        	setTimeout(bindingSave(),0);   
            dialogBox.close({
	                dialogName: 'alert'
	            }); 
	              	
        
        }else{
        	sel = false;
	        setTimeout(bindingSave(),0);   
        dialogBox.close({
                dialogName: 'alert'
            });
    }
})
}	

	function check(){
	$api.css($api.byId("submit"),"display:block");
	$api.css($api.byId("check"),"display:none");
		var t = /^1[3|4|5|7|8]\d{9}$/;
		var phone = $api.byId("phone");
		var phone_number = $api.val(phone);
		
		if(phone_number==''){
			toast("手机号不能为空")
			return false;
		}
		if(!t.test(phone_number)){
			toast("请填写正确的手机号")
			return false;
		}
		
		mobile = phone_number;
		//关联账号获取验证码 /如果该账号已存在则无需发送验证码 直接输入密码即可
		api.ajax({
	        url:'http://wap.jqmao.cn/bindGetCode',
	        method: 'post',   
	        data:{
	            values: {mobile: phone_number}
	        }
	        
        },function(ret,err){
        	//coding...
        	if(ret){
        		//alert(JSON.stringify(ret))
        		if(ret.code=='0'){
        			
        			$api.css($api.byId("code-wrap"),"display:none");
        			$api.css($api.byId("pwd-wrap"),"display:block");        			
        			uid = ret.uid;	
            		
        			
        		}else if(ret.code=='1'){
	        		$api.css($api.byId("code-wrap"),"display:none");
	        		$api.css($api.byId("pwd-wrap"),"display:none");
        			toast("该账号已关联第三方账号")
        			$api.css($api.byId("submit"),"display:none");
					$api.css($api.byId("check"),"display:block");
        			return false;
        		}else if(ret.code=='2'){
        			//uid = ret.uid;
        			$api.css($api.byId("code-wrap"),"display:block");
        			$api.css($api.byId("pwd-wrap"),"display:block");
        			
        		}
        	}else{
        		if(err.statusCode=='0'){
        			toast("请求超时")
        			return false;
        		}
        	}
        });
	}
	
	function getCode(){
		$api.attr(send,'disabled','disabled')
		api.ajax({
			url:'http://wap.jqmao.cn/getPin',
			method:'post',
			data:{
				values:{mobile: mobile}
			}
		},function(ret,err){
			if(ret){
				
				if(ret.code==0){
				uid = ret.uid;
					timer = setInterval(djs,1000);
				}else if(ret.code==2){
					toast('该用户已存在');
					$api.removeAttr(send,'disabled');
				}else{
					toast('验证码暂时无法发送');
					$api.removeAttr(send,'disabled');
				}
				
			}else{
				//alert(JSON.stringify(err));
			}
		})
	}
	 var djs = function(){
 		$api.html(send,times+"秒后重试");
   
       /* send.attr('disabled','disabled');*/
       /*$api.attr(send,'disabled','disabled')*/
        
        times--;
        if(times <= 0){
        	$api.html(send,"发送验证码");
            $api.removeAttr(send,'disabled')
            /*send.removeAttr('disabled');*/
            times = 60;
            clearInterval(timer);
        }
    }
	
	function submit(){
	//alert(sub)
		if(sub==true){
			return false;
		}
	
	//alert("submit")
		pin = $api.val($api.byId("code"));
		
		pwd = $api.val($api.byId("pwd"));
		//alert(pwd)
        			var p1 = /^([\x00-\xff]){6,20}$/;
            		var p2 = /^\S{6,20}$/;
            		
            			if(pwd==''){
            			//toast("密码不能为空")
            			return false;
            		}
            		
            		if(p1.test(pwd)==false||p2.test(pwd)==false){
            			toast("密码格式有误")
            			return false;
            		}
            		//alert(uid)
            		binding_alert();
            		
            		    		
            		
	}
	//完成关联并保存关联信息
	function bindingSave(){
	//alert("save")
		if($api.getStorage('registrationId')){
			var rid = $api.getStorage('registrationId')
		}else{
			var rid = null;
		}
		
		if(authorize.unionid){
				if(sel==true){
					var data = {values: {rid:rid,uid:uid,pwd:pwd,pin:pin,unionid:authorize.unionid,nickname:authorize.nickname,headimgurl:authorize.headimgurl}}
				}else{
					var data = {values: {rid:rid,uid:uid,pwd:pwd,pin:pin,unionid:authorize.unionid}}
				}
        	
        	}else if(authorize.openid){
        		
        		if(sel==true){
					var data = {values: {rid:rid,uid:uid,pwd:pwd,pin:pin,openid:authorize.openid,nickname:authorize.nickname,headimgurl:authorize.headimgurl}}
				}else{
					var data = {values: {rid:rid,uid:uid,pwd:pwd,pin:pin,openid:authorize.openid}}
				}
        	}
        	//alert(JSON.stringify(data))
        	if(data&&data!=''){
        		api.ajax({
	                    url:'http://wap.jqmao.cn/bindSaveMember',
	                    method: 'post',   
				        data:data
                    },function(ret,err){
                    	if(ret.code=='-1'){
                    		toast("密码错误");
                    		return false;
                    	}else if(ret.code=='-2'){
                    		toast("验证码错误");
                    		return false;
                    	}else if(ret.code=='-3'){
                    		toast("密码不能为空");
                    		return false;
                    	}
                    	if(ret.member){
                    		$api.setStorage('user',ret.member);
                    		//alert(JSON.stringify(ret.member));

                            var user = $api.getStorage('user');
                           // alert(JSON.stringify(user))
                            if(user){
                            	sub = true;
							var username = $api.getStorage('user').username;
								
								var	uid = $api.getStorage('user').uid;
								

                                api.execScript({
                                    name:'root',
                                    frameName: 'user',
                                    script: 'userReload()'
                                });
                                //api.closeWin();
                         		 //alert(uid);
                                 api.closeToWin({
                                 	name:'root'
                                 });
                                
                                //openWin('user');
                               // api.closeFrame();
                            }
                    		
                    	}else{
                    		//alert(JSON.stringify(err))
                    	}
                    	//coding...
                    });
        	}
     	}
     	
	
</script>
</html>